<template>
  <div class="task-card-container">
    <header class="row header">
      <user-list :userList="task_card_settings.relativeUsers" :isAllowEdit="false"></user-list>
      <span :class="generateLevel(task_card_settings.level)">
        {{ TaskLevel[task_card_settings.level] }}
      </span>
    </header>
    <section class="row section">
      <div class="keys-list">
        <span v-for="key in task_card_settings.keys" :key="key">{{ key }}</span>
      </div>
    </section>
    <footer class="row footer">
      <span>{{ task_card_settings.timeRange[0] }}</span>
      <h6>-</h6>
      <span>{{ task_card_settings.timeRange[1] }}</span>
    </footer>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import UserList from '@/components/basic/UserList.vue'
import { TaskCardType } from '@/interface/Basic'
import { TaskLevel } from '@/confirgurations/Basic'
import { Dictionary } from 'vue-router/types/router'
import { deepClone } from '@/utils/specificFunc'
@Component({
  components: {
    UserList
  }
})
class TaskCard extends Vue {
  @Prop({ required: true }) TaskCardSettings!: TaskCardType
  task_card_settings: TaskCardType = {
    level: 1,
    keys: [],
    description: '',
    relativeUsers: [],
    timeRange: ['', '']
  }
  TaskLevel: Dictionary<string> = TaskLevel
  mounted() {
    this.task_card_settings = deepClone(this.TaskCardSettings)
  }
  generateLevel(level: number) {
    const levelClass = ['urgency', 'normal', 'overtime']
    return levelClass[level]
  }
}
export default TaskCard
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
.task-card-container {
  box-sizing: border-box;
  padding: 10px 20px;
  width: 100%;
  border-radius: 5px;
  border: solid 1px;
  #color(color, --primary-text-color);
  #color(border-color, --primary-border-color);
  #color(background-color, --module-bg-color);
  #shadow-color(0, 0, 4px, 0, --primary-shadow-color);
  .row {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .header {
    justify-content: space-between;
    span {
      box-sizing: border-box;
      padding: 3px 10px;
      border-radius: 5px;
      font-size: 12px;
      color: #ffffff;
    }
    .normal {
      #color(background-color, --primary-green-color);
    }
    .urgency {
      #color(background-color, --primary-red-color);
    }
    .overtime {
      #color(background-color, --primary-yellow-color);
    }
  }
  .section {
    padding: 6px 0;
    flex-direction: column;
    align-items: flex-start;
    .keys-list {
      display: flex;
      align-items: center;
      span {
        box-sizing: border-box;
        padding: 4px 8px;
        margin-right: 5px;
        font-size: 12px;
        color: #ffffff;
        #color(background-color, --primary-blue-color);
      }
    }
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    span {
      box-sizing: border-box;
      padding: 4px 12px;
      font-size: 12px;
      #shadow-color(0, 0, 4px, 0, --primary-shadow-color);
    }
    h6 {
      margin: 0 10px;
      font-size: 12px;
    }
  }
}
</style>
